/**
 * 点击埋点组件使用示例
 * @author lhx
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ClickTrackerLhx, { 
  TrackedTouchableOpacityLhx, 
  TrackedViewLhx,
  withClickTrackingLhx 
} from '../components/ClickTrackerLhx';
import { EventPriority } from '../types/trackingTypes';

// 示例：普通按钮组件
const ExampleButton: React.FC<{ onPress: () => void; title: string }> = ({ onPress, title }) => (
  <View style={styles.button}>
    <Text style={styles.buttonText}>{title}</Text>
  </View>
);

// 使用高阶组件包装
const TrackedButton = withClickTrackingLhx(ExampleButton);

const ClickTrackingUsageExampleLhx: React.FC = () => {
  
  const handleCarCardClick = (carId: string, position: number) => {
    console.log('Car card clicked:', carId);
    // 这里处理实际的业务逻辑
  };

  return (
    <View style={styles.container}>
      
      {/* 示例1: 基础使用 - 推荐车辆卡片点击 */}
      <ClickTrackerLhx
        eventName="recommendation_car_click"
        properties={{
          carId: "car_123",
          position: 1,
          price: 150000,
          brand: "BMW",
          elementType: "car_card"
        }}
        priority={EventPriority.HIGH}
        onPress={() => handleCarCardClick("car_123", 1)}
      >
        <View style={styles.carCard}>
          <Text style={styles.carTitle}>BMW X5 2020</Text>
          <Text style={styles.carPrice}>¥150,000</Text>
          <Text style={styles.carInfo}>里程: 5万公里</Text>
        </View>
      </ClickTrackerLhx>

      {/* 示例2: 使用预设组件 - 筛选按钮 */}
      <TrackedTouchableOpacityLhx
        eventName="filter_button_click"
        properties={{
          filterType: "price_range",
          buttonText: "价格筛选"
        }}
        priority={EventPriority.MEDIUM}
        onPress={() => console.log('Filter button pressed')}
        style={styles.filterButton}
      >
        <Text style={styles.filterText}>价格筛选</Text>
      </TrackedTouchableOpacityLhx>

      {/* 示例3: 包装View - 推荐位广告 */}
      <TrackedViewLhx
        eventName="recommendation_banner_click"
        properties={{
          bannerId: "banner_001",
          position: "top",
          campaignId: "spring_sale_2024"
        }}
        priority={EventPriority.LOW}
        style={styles.banner}
      >
        <Text style={styles.bannerText}>春季购车大促销</Text>
        <Text style={styles.bannerSubtext}>点击查看详情</Text>
      </TrackedViewLhx>

      {/* 示例4: 高阶组件用法 */}
      <ClickTrackerLhx
        eventName="share_button_click"
        properties={{
          shareType: "recommendation",
          platform: "wechat"
        }}
        priority={EventPriority.MEDIUM}
        onPress={() => console.log('Share button pressed')}
      >
        <ExampleButton 
          title="分享推荐"
          onPress={() => {}}
        />
      </ClickTrackerLhx>

      {/* 示例5: 复杂场景 - 搜索建议点击 */}
      <ClickTrackerLhx
        eventName="search_suggestion_click"
        properties={{
          suggestionText: "奔驰C级",
          suggestionRank: 3,
          searchQuery: "奔驰",
          suggestionSource: "auto_complete"
        }}
        priority={EventPriority.HIGH}
        preventDoubleClick={true}
        doubleClickInterval={300}
        trackingDelay={100} // 延迟100ms追踪，确保用户操作完成
        onTrack={(event) => {
          console.log('Search suggestion tracking:', event);
        }}
        onPress={() => {
          console.log('Search suggestion selected');
          // 执行搜索逻辑
        }}
      >
        <View style={styles.suggestion}>
          <Text style={styles.suggestionText}>🔍 奔驰C级</Text>
          <Text style={styles.suggestionCount}>约1200辆</Text>
        </View>
      </ClickTrackerLhx>

      {/* 示例6: 禁用状态演示 */}
      <ClickTrackerLhx
        eventName="disabled_button_click"
        properties={{
          reason: "not_logged_in"
        }}
        disabled={true} // 禁用埋点
        onPress={() => console.log('This should not be tracked')}
      >
        <View style={[styles.button, styles.disabledButton]}>
          <Text style={styles.disabledText}>需要登录</Text>
        </View>
      </ClickTrackerLhx>

      {/* 示例7: 收藏按钮（带状态变化） */}
      <ClickTrackerLhx
        eventName="favorite_toggle_click"
        properties={{
          carId: "car_456",
          currentState: "unfavorited",
          action: "add_favorite"
        }}
        priority={EventPriority.MEDIUM}
        onPress={() => {
          console.log('Toggle favorite');
          // 更新收藏状态的业务逻辑
        }}
      >
        <View style={styles.favoriteButton}>
          <Text style={styles.favoriteIcon}>♡</Text>
          <Text style={styles.favoriteText}>收藏</Text>
        </View>
      </ClickTrackerLhx>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  carCard: {
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 8,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  carTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
  },
  carPrice: {
    fontSize: 20,
    color: '#e74c3c',
    fontWeight: 'bold',
    marginBottom: 4,
  },
  carInfo: {
    fontSize: 14,
    color: '#666',
  },
  filterButton: {
    backgroundColor: '#3498db',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 6,
    marginBottom: 12,
  },
  filterText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  banner: {
    backgroundColor: '#f39c12',
    padding: 20,
    borderRadius: 8,
    marginBottom: 12,
    alignItems: 'center',
  },
  bannerText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 4,
  },
  bannerSubtext: {
    fontSize: 14,
    color: 'white',
    opacity: 0.9,
  },
  button: {
    backgroundColor: '#2ecc71',
    padding: 12,
    borderRadius: 6,
    marginBottom: 12,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  disabledButton: {
    backgroundColor: '#bdc3c7',
  },
  disabledText: {
    color: '#7f8c8d',
  },
  suggestion: {
    backgroundColor: 'white',
    padding: 12,
    borderRadius: 6,
    marginBottom: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  suggestionText: {
    fontSize: 16,
    color: '#333',
  },
  suggestionCount: {
    fontSize: 12,
    color: '#666',
  },
  favoriteButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: '#e74c3c',
    marginBottom: 12,
  },
  favoriteIcon: {
    fontSize: 20,
    color: '#e74c3c',
    marginRight: 8,
  },
  favoriteText: {
    color: '#e74c3c',
    fontWeight: 'bold',
  },
});

export default ClickTrackingUsageExampleLhx;